<!-- Pagination.svelte -->

<script>
    // @ts-nocheck
    import { API_BASE_URL, API_BASE_WEAPONSPAGESIZE } from "@/lib/config";
    import { page } from "$app/stores";
    export let totalPages = 0; // 总页数

    let currentPage = Number($page.params.slug);

    //由于界面被缓存，只更新更新，所以参数改变需要监听才能拿到
    const unsubscribe = page.subscribe(($page) => {
        currentPage = Number($page.params.slug);
    });

    let searchParams = $page.url.search;
    let pageAre = Math.ceil(totalPages / API_BASE_WEAPONSPAGESIZE);
</script>

<div class="flex justify-between w-full my-6">
    {#if currentPage != 1}
        <a class="button" href={`/weapons/${currentPage - 1}${searchParams}`}> 上一页 </a>
    {:else}
        <div class="button !cursor-no-drop"> 上一页</div>
    {/if}

    <ul class="flex">
        {#each Array(pageAre)
            .fill(0)
            .map((_, i) => i + 1) as page}
            {#if Math.abs(page - currentPage) < 3}
                <li class="mx-2">
                    <a href={`/weapons/${page}${searchParams}`} class="button" class:active={page === currentPage}>
                        {page}
                    </a>
                </li>
            {/if}
        {/each}
        <!-- 页码按钮 -->
    </ul>
    {#if currentPage < Math.ceil(totalPages / API_BASE_WEAPONSPAGESIZE)}
        <a class="button" href={`/weapons/${currentPage + 1}${searchParams}`}> 下一页 </a>
    {:else}
        <div class="button !cursor-no-drop"> 下一页</div>
    {/if}
</div>

<style lang="less">
    .button {
        padding: 5px 10px;
        cursor: pointer;
        background: var(--color4);
        border-radius: 2px;
        border: 1px solid var(--color4);
        &:hover {
            background: var(--color1);
            border: 1px solid var(--color1);
            &:disabled {
                cursor: not-allowed;
                background: none;
            }
        }
        &.active {
            font-weight: bold;
            background: var(--theme);
        }
    }
</style>
